<template>
	<view class="daily_task flex-no-horizontal">
		<view class="left">
			<view class="top flex-no-horizontal">
				<image class="img1" src="../../../static/ring/chart/meirirenwu.png" mode="aspectFit"></image>
				<text>每日任务</text>
				<image class="img2" src="../../../static/ring/tipinfo.png" mode="aspectFit"></image>
			</view>
			<view class="text1">
				完成每日任务领取奖励
			</view>
			<view class="text2">
				(根据睡眠等健康数据同步情况按比例发放)
			</view>
		</view>
		<view class="btn text-center">
			领取奖励
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import store from "@/store/index";
	export default {
		computed: {
			...mapGetters('ringDataManage', ["domDataUsedByGuideConfig"])
		},
		data() {
			return {

			};
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select(".daily_task")
				.boundingClientRect((data) => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top);
					store.commit("ringDataManage/SET_DOM_DATA_USERD_BY_GUIDE_CONFIG", {
						dailyTask: data.top,
						...this.domDataUsedByGuideConfig
					});
				})
				.exec();

		},
		methods: {

		},
	};
</script>
<style lang="scss" scoped>
	.daily_task {
		margin: 0 32rpx;
		margin-bottom: 32rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.4);
		padding: 20rpx 30rpx;

		.left {
			flex: 1;

			.top {
				margin-bottom: 10rpx;

				.img1 {
					width: 36rpx;
					height: 36rpx;
					margin-right: 4rpx;
				}

				text {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(25, 82, 248, 1);

				}

				.img2 {
					width: 24rpx;
					height: 24rpx;
					margin-left: 12rpx;
				}
			}

			.text1 {
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}

			.text2 {
				color: rgba(153, 153, 153, 1);
				font-size: 20rpx;
			}
		}

		.btn {
			width: 244rpx;
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 20rpx;
			background: rgba(35, 89, 248, 1);
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 8rpx;
			color: rgba(255, 255, 255, 1);

		}
	}
</style>